<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>出勤记录系统</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/js.cookie.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-datepicker.min.js"></script>
    <link href="css/bootstrap-datepicker.min.css" rel="stylesheet">
    <script>
        $(document).ready(
            function () {

                // 初始化时钟
                function currentTime() {
                    var now = new Date();
                    var year = now.getFullYear(); // 获取年份
                    var month = (now.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份从0开始，所以加1
                    var day = now.getDate().toString().padStart(2, '0'); // 获取日期
                    var hour = now.getHours().toString().padStart(2, '0'); // 获取小时
                    var minute = now.getMinutes().toString().padStart(2, '0'); // 获取分钟
                    var second = now.getSeconds().toString().padStart(2, '0'); // 获取秒数

                    // 拼接成 yyyy-MM-dd HH:mm:ss 格式的字符串
                    var timeStr = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
                    $('#clock').text(timeStr);
                }

                setInterval(currentTime, 1000); // 每秒更新时间

                // 查询最近一次的考勤记录详情
                function queryDetail() {
                    $.ajax({
                        url: "/api/oaAttendanceRecord/detailByLast",
                        type: 'POST',
                        data: JSON.stringify({}),
                        contentType: 'application/json',
                        success: function (data) {
                            if (data.stateCode === '-1') {
                                window.alert(data.msg);

                            } else if (data.data && data.data.startTime) {
                                $('#clockInButton').hide();
                                $('#clockOutButton').show();
                            } else {
                                $('#clockInButton').show();
                                $('#clockOutButton').hide();
                            }
                        }
                    });
                }

                queryDetail();

                // 上班打卡
                $('#clockInButton').click(function () {
                    var val = $('#clock').text();
                    $.ajax({
                        url: "/api/oaAttendanceRecord/clockin",
                        type: 'POST',
                        data: JSON.stringify({
                            recordDate:
                            val
                            , status: 1
                        }),
                        contentType: 'application/json',
                        success: function (res) {
                            // 然后显示原生的 alert
                            window.alert(res.msg);
                            queryDetail(); // 更新打卡状态
                            loadAttendanceRecords(); // 重新加载考勤记录
                        }
                    });
                });

                // 下班打卡
                $('#clockOutButton').click(function () {
                    var val = $('#clock').text();
                    $.ajax({
                        url: "/api/oaAttendanceRecord/clockin",
                        type: 'POST',
                        data: JSON.stringify({
                            recordDate:
                            val
                            , status: 2
                        }),
                        contentType: 'application/json',
                        success: function (res) {
                            // 然后显示原生的 alert
                            window.alert(res.msg);
                            queryDetail(); // 更新打卡状态
                            loadAttendanceRecords(); // 重新加载考勤记录
                        }
                    });
                });

                // 获取当前的年份和月份
                var now = new Date();
                var currentYear = now.getFullYear();
                var currentMonth = now.getMonth() + 1; // getMonth() 返回的月份是从0开始的，所以需要+1

                // 初始化日期选择器，默选当前月
                $('.datepicker').datepicker({
                    format: 'yyyy-mm',
                    startView: 'months',
                    minViewMode: 'months'
                }).on('changeDate', function (e) {
                    $(this).datepicker('hide');
                    loadAttendanceRecords()
                }).datepicker('setDate', new Date(currentYear, currentMonth - 1)); // 设置日期选择器的值为当前月份


            });

        // 加载考勤记录
        function loadAttendanceRecords() {

            var month = $('input[name="month"]').val();
            $.ajax({
                url: "/api/oaAttendanceRecord/list",
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({month: month}),

                success: function (data) {
                    var records = data.data;
                    var html = '';
                    records.forEach(function (record) {
                        html += '<tr>' +
                            '<td>' + record.userName + '</td>' +
                            '<td>' + record.recordDate + '</td>' +
                            '<td>' + record.startTime + '</td>' +
                            '<td>' + record.endTime + '</td>' +
                            '<td>' + (record.late ? '是' : record.late === null ? ' -- ' : '否') + '</td>' +
                            '<td>' + (record.early ? '是' : record.early === null ? ' -- ' : '否') + '</td>' +
                            '<td>' + (record.status === 1 ? '正常' : record.status === 2 ? '请假' : ' -- ') + '</td>' +
                            '</tr>';
                    });
                    $('#attendanceRecords').html(html);
                }
            });
        }

        loadAttendanceRecords();

    </script>
    <script>
        $(function () {
            $('#header').load('admin_header.html');
        })
    </script>
</head>
<body>
<div id="header"></div>
<div></div>
<div class="container">
    <h2>考勤管理系统</h2>
    <div id="clock" style="font-size: 24px; font-weight: bold;"></div>
    <button class="btn btn-primary" id="clockInButton">上班打卡</button>
    <button class="btn btn-warning" id="clockOutButton" style="display: none;">下班打卡</button>
    <form id="searchForm" onsubmit="return false;">
        <div class="input-group">
            <input type="text" class="form-control datepicker" name="month" placeholder="选择月份">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" onclick="loadAttendanceRecords()">查询</button>
            </span>
        </div>
    </form>
    <table class="table table-striped" id="attendanceRecordsTable">
        <thead>
        <tr>
            <th>员工姓名</th>
            <th>考勤日期</th>
            <th>上班打卡时间</th>
            <th>下班打卡时间</th>
            <th>是否迟到</th>
            <th>是否早退</th>
            <th>打卡状态</th>
        </tr>
        </thead>
        <tbody id="attendanceRecords">
        </tbody>
    </table>
</div>
</body>
</html>
